<template>

  <div>
    <div v-if="lookReceiptStatus">
      <el-card>
        <el-page-header @back="goBack" content="发票信息页面">
        </el-page-header>
      </el-card>

      <el-table
          ref="receiptData"
          :data="receiptData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            align='center'
            label="编号"
        >
        </el-table-column>
        <el-table-column
            align='center'
            prop="billDate"
            label="日期"
        >
        </el-table-column>
        <el-table-column
            align='center'
            prop="payType"
            label="支付类型"
        >
        </el-table-column>

        <el-table-column
            align='center'
            prop="spend"
            label="支付金额"
        >
        </el-table-column>

      </el-table>

    </div>
    <div v-if="lookReceiptStatus==false">
      <el-table
          ref="tableData"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="id"
            align='center'
            label="编号"
        >
        </el-table-column>
        <el-table-column
            fixed
            align='center'
            prop="orderDate"
            label="日期"
        >
        </el-table-column>
        <el-table-column
            align='center'
            prop="user.name"
            label="姓名"
        >
        </el-table-column>

        <el-table-column
            align='center'
            prop="orderNum"
            label="数量"
        >

        </el-table-column>
        <el-table-column
            align='center'
            prop="price"
            label="价格"
        >
        </el-table-column>
        <!--      <el-table-column-->
        <!--          align='center'-->
        <!--          prop="status"-->
        <!--          label="是否支付完毕"-->
        <!--          width="120">-->
        <!--        <template slot-scope="scope">-->
        <!--          <input type="checkbox" name="items" :checked="scope.row.status" value="是"/>-->
        <!--        </template>-->

        <!--      </el-table-column>-->
        <el-table-column
            label="订单详情"
        >

          <template slot-scope="scope">
            <el-button  type="text" size="small" @click="look(scope.row)">查看</el-button>
          </template>


        </el-table-column>
      </el-table>
      <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
        <el-table :data="tableData2">
          <el-table-column align='center' property="id" label="编号" ></el-table-column>
          <el-table-column align='center' property="goodsName" label="商品名称" ></el-table-column>
          <el-table-column align='center' property="goodsNum" label="商品数量"></el-table-column>
          <el-table-column align='center' property="outPrice" label="商品价格"></el-table-column>
        </el-table>
      </el-dialog>
      <template>
        <div style="text-align: center;padding: 20px 0px;">
          <el-button  type="primary" round @click="lookReceipt">查看发票</el-button>
        </div>
      </template>
    </div>
  </div>


</template>

<script>
import axios from 'axios'
  export default {
  name :"order",
    methods: {
      goBack(){
        this.lookReceiptStatus=false;
      },
      lookReceipt(){
        //发票查看请求
        this.lookReceiptStatus=true;
        axios({
          method: "get",
          url: "http://localhost:8088/bills",
          params:{uId:this.uId} 
        }).then(resp => {
          if( resp.data!=''){
            this.receiptData = resp.data;
          }else {
            this.$message({
              type: 'warning',
              message: '数据查询失败'
            });
          }

        })
      },

      
      handleClick(row) {
        console.log(row);
        this.$router.push("/pay");
      },
      look(row){
        this.dialogTableVisible=true;
        this.tableData2=row.goodsList;
      }
    },
    created(){
      axios.get(`http://localhost:8088/userOrders`,{
        params:{
          uId:JSON.parse(sessionStorage.getItem('user')).id,
        }
      }).then(response=>{
        console.log('我的')
        this.$set(this,'tableData',response.data)
      })
    },
    mounted() {

      console.log(this.tableData);

    },
    data() {
      return {
        receiptData:[],
        lookReceiptStatus:false,
        uId: JSON.parse(sessionStorage.getItem('user')).id,
        dialogTableVisible: false,
        tableData2:[],
        tableData:[]
      }
    }
  }
</script>